<!--
 * @Descripttion: 主页
 * @Author: linzisong
 * @Date: 2021-06-29 08:24:07
 * @LastEditors: linzisong
 * @LastEditTime: 2021-07-08 17:07:52
-->
<template>
  <div class="formPage">
    <el-container class="container">
      <el-header class="container_header">My Form Design</el-header>
      <el-container>
        <el-aside class="container_aside-left" width="300px">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础字段" name="1">
              <base-items :list="baseLists"></base-items>
            </el-collapse-item>
            <el-collapse-item title="布局字段" name="2">
              <base-items :list="layoutLists"></base-items>
            </el-collapse-item>
          </el-collapse>
        </el-aside>
        <el-main class="container_main">
          <main-head :data-config="data.config"></main-head>
          <main-body
            :data="data"
            :selectItem="selectItem"
            @handleSelectItem="handleSetSelectItem"
            
          ></main-body>
        </el-main>
        <el-aside class="container_aside-right" width="280px">
          <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
            <el-tab-pane label="字段属性" name="0">
              <element-config></element-config>
            </el-tab-pane>
            <el-tab-pane label="表单属性" name="1">
              <form-config :config="data.config"></form-config>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { baseLists, layoutLists } from "@/components/FormDesign/config/config";
import {
  lsitType,
  layoutType,
  dataType,
  configType,
  selectItemType,
} from "@/components/FormDesign/config/interfaceConfig";
import BaseItems from "@/components/FormDesign/leftPage/BaseItems.vue";
import MainHead from "@/components/FormDesign/mainPage/MainHead.vue";
import MainBody from "@/components/FormDesign/mainPage/MainBody.vue";
import ElementConfig from "@/components/FormDesign/configPage/ElementConfig.vue";
import FormConfig from "@/components/FormDesign/configPage/FormConfig.vue";

@Component({
  components: {
    BaseItems,
    MainHead,
    MainBody,
    ElementConfig,
    FormConfig,
  },
})
export default class index extends Vue {
  activeNames: string[] = ["1", "2"];
  baseLists: lsitType[] = baseLists; // 基础字段
  layoutLists: layoutType[] = layoutLists; // 布局字段
  data: dataType = {
    list: [],
    config: {
      labelWidth: 100,
      labelPosition: "right",
      size: "small",
      inline: false,
    },
  };
  selectItem: selectItemType = {
    key: "",
  };
  formData: lsitType[] = this.data.list; // 主体内容数据
  configData: configType = this.data.config; // 表单配置数据
  updateTime = 0; // 更新时间
  activeName = '1'; // tabs 中的显示属性

  created(): void {
    // this.baseLists = baseLists;
    // this.layoutLists = layoutLists;
  }

  handleSetSelectItem(record?: lsitType): boolean {
    // 操作间隔不能低于100毫秒
    const newTime = new Date().getTime();
    if (newTime - this.updateTime < 100) {
      return false;
    }

    this.updateTime = newTime;

    // 设置selectItem的值
    this.selectItem = (record ? record : {key: ''});

    // // 判断是否选中控件，如果选中则弹出属性面板，否则关闭属性面板
    // if (record.key) {
    //   this.startType = record.type;
    //   this.changeTab(2);
    // } else {
    //   this.changeTab(1);
    // }
    return true;
  }

  // handleChange(value: string[]): void {
  //   console.log(value);
  // }
  handleClick(tab:any, event:any):void {
    // console.log(tab, event);
  }
}
</script>
<style lang="scss" >
@import "./../styles/form-design";
</style>
